<style scoped>
  .dati-box {
    margin-top: 0.88rem;
  }
</style>
<template>
    <div class="dati-box">
      <navx></navx>
      <div style="display: none" class="st-box">
        <div class="st-box-tit">
          <div class="st-type">单选题</div>
          <div class="st-tihao">1/150</div>
        </div>
        <div class="st-title">具抗炎作用，用于治疗胃溃疡的活性成为为:</div>
        <div class="answer-list bg">
            <span>A</span>
            <span>甘草皂苷和甘草次酸</span>

        </div>
        <div class="answer-list">
          <span>B</span>
          <span>甘草皂苷和甘草次酸</span>
        </div>
        <div class="answer-list">
          <span>C</span>
          <span>甘草皂苷和甘草次酸</span>
        </div>
        <div class="answer-list">
          <span>D</span>
          <span>甘草皂苷和甘草次酸</span>
        </div>

        <div class="submit">确定</div>

      </div>

      <!--答题2-->
      <div class="dati-box2">
        <div class="dati-box2-title">
          <div>A1题型</div>
          <div >1/150</div>
        </div>
        <div class="fuhe-container">
          <div class="fuhe-ti-container">
              <div class="fuhe-list">
                <span>A</span>
                <span>
                  用于调和某些药物的烈性。如调味承气汤用本品缓和大黄、芒硝的泻下作用及其对胃肠道的刺激。另外，在许多处方中也常用本品调和诸药。
                </span>
              </div>
              <div class="fuhe-list">
                <span>B</span>
                <span>
                    用于调和某些药物的烈性。如调味承气汤用本品缓和大黄、芒硝的泻下作用及其对胃肠道的刺激。另外，在许多处方中也常用本品调和诸药。
                  </span>
              </div>
              <div class="fuhe-list">
                <span>C</span>
                <span>
                    用于调和某些药物的烈性。如调味承气汤用本品缓和大黄、芒硝的泻下作用及其对胃肠道的刺激。另外，在许多处方中也常用本品调和诸药。
                  </span>
              </div>
              <div class="fuhe-list">
                <span>D</span>
                <span>
                    用于调和某些药物的烈性。如调味承气汤用本品缓和大黄、芒硝的泻下作用及其对胃肠道的刺激。另外，在许多处方中也常用本品调和诸药。
                  </span>
              </div>
          </div>
          <div class="fuhe-title">材料</div>
        </div>
        <div class="up">
          <img src="../assets/img/up.png" />
        </div>
        <div class="st-box">
            <div class="st-title">具抗炎作用，用于治疗胃溃疡的活性成为为:</div>
            <div class="answer-list bg">
              <span>A</span>
              <span>甘草皂苷和甘草次酸</span>

            </div>
            <div class="answer-list">
              <span>B</span>
              <span>甘草皂苷和甘草次酸</span>
            </div>
            <div class="answer-list">
              <span>C</span>
              <span>甘草皂苷和甘草次酸</span>
            </div>
            <div class="answer-list">
              <span>D</span>
              <span>甘草皂苷和甘草次酸</span>
            </div>

            <div class="submit" style="margin-top: 0.3rem;margin-bottom: 0.3rem">确定</div>
        </div>

      </div>


      <!--答题卡-->
      <div class="datika-box" @click="close" v-if="tistyle">
        <div class="datika">
          <div class="datika-container" @click.stop>
            <div class="ka-title">
              <div class="ka-line"></div>
              <div class="ka-name">答题卡</div>
              <div class="element2"></div>
              <div class="ka-yida-text">已答</div>
              <div class="element3"></div>
              <div class="ka-weida-text">未答</div>
            </div>
            <div class="ka-list">
              <div class="ti-list dati-style" v-for="(item,index) in ti" @click.stop="select(index)">{{item}}</div>
            </div>
            <div class="jiaojuan">交卷并查看结果</div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
    import axios from 'axios'
    import '../assets/css/components_swiper.css'
    import navx from '@/components/navx'
    export default {
        name: '',
        data() {
            return {
              ti:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
              tistyle:true
            }
        },components:{
          navx
    }, created() {

        }, mounted() {
        }, methods: {
          select:function (index) {
            index=index+1;
            console.log(index)
          },
        close:function () {
          this.tistyle=false
        }
      }
    }
</script>
